<template>
  <div>
    <div class="commentMd-title">
      <img :lazy-load="true" :src="item.head_img ? picPre + item.head_img : picPre + 'front/avatar.jpg'" alt="">
      <div>
        <p>{{item.username}}</p>
        <p>{{item.created_at}}</p>
      </div>
      <i v-if="delBtn" class="iconfont iconshanchu" ﻿@tap.stop="deleteBtn(item[currentFiled.id])" style="font-size: 20rpx;color: #cecece;padding: 20rpx 0 20rpx 80rpx"></i>
      <i v-if="isCollectPage" class="iconfont iconshoucang" ﻿@tap.stop="optBtn(item[currentFiled.id], isCollect,'collect', item.auth, item.posts_status)" style="font-size: 36rpx;color: #EF5A56;"></i>
    </div>
    <div class="commentMd-content" :class="item[currentFiled.img].length > 0 &&item[currentFiled.img][0] !== '' ?'':'commentMd-contentFont'">
      <div><p>{{item[currentFiled.title]}}</p></div>
      <img :lazy-load="true" v-if="item[currentFiled.img].length > 0 &&item[currentFiled.img][0] !== '' " :src="picPre + item[currentFiled.img][0]" mode="aspectFill" alt="">
    </div>
    <div class="commentMd-footer" :class="delBtn?'issueBorder':''">
      <div ﻿@tap.stop="toDetail(item[currentFiled.id], item.status,item.auth,item.posts_status)">
        <i class="iconfont iconpinglun" style="font-size: 36rpx;"></i>
        <p>{{item.comment_num}}</p>
      </div>
      <div :class="isLike===1?'like':'notLike'" ﻿@tap.stop="optBtn(item[currentFiled.id], isLike, 'like', item.auth, item.posts_status)">
        <i class="iconfont iconzan" style="font-size: 36rpx;"></i>
        <p :class="isLike===1?'like':'notLike'">{{likeNum}}</p>
      </div>
      <div v-if="!isCollectPage" :class="isCollect===1?'collect':'notLike'" ﻿@tap.stop="optBtn(item[currentFiled.id], isCollect,'collect', item.auth, item.posts_status)">
        <i class="iconfont iconshoucang" style="font-size: 36rpx;"></i>
        <p :class="isCollect===1?'collect':'notLike'">{{collectNum}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: "item",
    props: {
      item: {
        type: Object
      },
      delBtn: {
        type: Boolean,
        default: false
      },
      isCollectPage:{
        type: Boolean,
        default: false
      },
      isSearchPage:{
        type: Boolean,
        default: false
      },
      //社群进贴的权限判断
      jurisdiction:{
        type: Boolean,
        default: false
      },
      needStatus:{
        type: Boolean,
        default: false
      }
    },
    data(){
      let that = this;
      return {
        picPre: that.$api.picPre,
        isLike: 2,
        isCollect: 2,
        likeNum: 0,
        collectNum: 0,
        filed:{
          img: 'img',
          title: 'title',
          id: 'id',
        },
        collectFiled:{
          img: 'posts_img',
          title: 'posts_title',
          id: 'posts_id',
        },
        currentFiled:{
          img: 'img',
          title: 'title',
          id: 'id',
        }
      }
    },
    methods: {
      validateInfo(auth,postsStatus, type){
        let validate = true
        if(!this.isLogin){
          let that = this;
          ﻿uni.showModal({
            title: '亲，您尚未登录',
            content: '前去登录吧~',
            success (res) {
              if (res.confirm) {
                ﻿uni.navigateTo({ 				  	url:'/person/login' 				  })
              }
            }
          });
          validate = false;
        }
        else {
          if(this.needStatus) {
            if(this.item.status === "1") {
              ﻿uni.showToast({
                title: '该帖子待审核',
                icon: 'none',
                duration: 2000
              })
              validate =  false;
            } else if(this.item.status === "2") {
              ﻿uni.showToast({
                title: '该帖子未通过审核',
                icon: 'none',
                duration: 2000
              })
              validate =  false;
            }
          }
          else if(this.jurisdiction){
            if(auth === "no"){
              ﻿uni.showToast({
                title: '请先加入该群组！',
                icon: 'none',
                duration: 2000
              })
              validate =  false;
            }
          } else if(this.isCollectPage && postsStatus !== 1 && type !== 'opt') {
            ﻿uni.showToast({
              title: '发帖信息不存在',
              icon: 'none',
              duration: 2000
            })
            validate =  false;
          }
        }
        return validate
      },
      toDetail(id,status,auth,postsStatus){
        if(this.validateInfo(auth,postsStatus)){
			uni.navigateTo({
				url: '/movie/postDetails?id='+id
			})
        }
      },
      optBtn(id, state, type, auth, postsStatus){
        if(this.validateInfo(auth,postsStatus, 'opt')) {
          if (state === 1) {
            this.clickLike(id, type, "no")
          } else {
            this.clickLike(id, type, "yes")
          }
        }
      },
      deleteBtn(id) {
        let that = this
        ﻿uni.showModal({
          title: '删除帖子',
          content: '确认删除？',
          success (res) {
            if (res.confirm) {
              that.$ajax
                .post(that.$api.delPosts, {
                  id: id,
                })
                .then(res => {
                  that.$emit('delPosts', id);
                })
                .catch(err => {
                  ﻿uni.showToast({
                    title: err,
                    icon: 'none',
                    duration: 2000
                  })
                });
            }
          }
        });

      },
      clickLike(id, type, state) {
        this.$ajax
          .post(this.$api.clickLike, {
            posts_id: id,
            type: type,
            is_click: state
          })
          .then(res => {
            if(this.isCollectPage){
              if(type === 'collect'){
                this.$emit("delCollect", 2, id )
              }
            }
            if(state === 'no'){
              if(type === 'like'){
                this.likeNum--
                this.isLike = 2
              } else {
                this.isCollect = 2
                this.collectNum--
              }
            } else {
              if(type === 'like'){
                this.likeNum++
                this.isLike = 1
              } else {
                this.collectNum++
                this.isCollect = 1
              }
            }
          })
          .catch(err => {
            ﻿uni.showToast({
              title: err,
              icon: 'none',
              duration: 2000
            })
          });
      },
    },
    computed: {
      ...mapState([
        'isLogin'
      ])
    },
    watch:{
      item: {
        handler(val) {
          this.isCollect = val.is_collect
          this.isLike = val.is_like
          this.likeNum = val.like_num
          this.collectNum = val.collect_num
          if(this.isCollectPage || this.isSearchPage){
            if(this.isCollectPage){
              this.isCollect = 1
            }
            this.currentFiled = JSON.parse(JSON.stringify(this.collectFiled))
          } else {
            this.currentFiled = JSON.parse(JSON.stringify(this.filed))
          }
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>

<style scoped>
  .commentMd-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .commentMd-title>img{
    width: 64rpx;
    height: 64rpx;
    margin-right: 20rpx;
    border-radius: 50%;
  }
  .commentMd-title>div{
    flex: 1;
  }
  .commentMd-title>div>p:first-child{
    font-size: 24rpx;
    color: #7A7A7A;
  }
  .commentMd-title>div>p:last-child{
    color: #ADADAD;
    font-size: 20rpx;
  }
  .commentMd-content{
    display: flex;
    justify-content: space-between;
    margin-top: 21rpx;
  }
  .commentMd-content>img{
    width: 164rpx;
    height: 117rpx;
    border-radius: 6rpx;
  }
  .commentMd-content>div{
    font-size: 30rpx;
    color: #323232;
    width: 63.5%;
    font-weight: bold;
    padding-top: 28rpx;
  }
  .commentMd-contentFont>div{
    width: 100%;
  }
  .commentMd-contentFont>img{
    width: 0;
    height: 0;
  }
  .commentMd-content>div>p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .commentMd-footer{
    display: flex;
    margin-top: 30rpx;
    border-bottom: 1rpx solid #EEEEEE;
    padding-bottom: 22rpx;
  }
  .issueBorder{
    border-bottom: 14rpx solid #F7F7F7;
  }
  .commentMd-footer>div{
    display: flex;
    align-items: center;
  }
  .commentMd-footer>div:last-child{
    margin-left: 55rpx;
  }
  .commentMd-footer>div:first-child{
    margin-right: 55rpx;
  }
  .commentMd-footer>div>p{
    font-size: 22rpx;
    color: #323232;
    margin-left: 20rpx;
  }
  .like{
    color: #56A2EF !important;
  }
  .collect{
    color: #EF5A56 !important;
  }
  .notLike{
    color: #323232;
  }
</style>
